// 报修来源统计 饼图
import type { seriesDataType, pieChartDataListType } from './typings'
import { defineComponent, reactive, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import useVuexGetters from '~/hooks/useVuexGetters'
import styles from '~/pages/oam/index.module.scss'

export default defineComponent({
  name: 'PieChart',
  props: ['dataList'],
  setup(props: { dataList: pieChartDataListType['dataList'] } = { dataList: [] }) {
    // 初始值
    const state = reactive<seriesDataType>({
      // 图表数据
      datas: []
    })
    const assetOverviewVuexState = useVuexGetters('assetOverview', [
      'customColorList',
      'customFontColorList'
    ])

    watch(
      () => props.dataList,
      () => {
        pieInit()
      }
    )

    // mounted
    onMounted(() => {
      createPieInit()
    })

    // methods
    // 初始化echarts实例
    const createPieInit = () => {
      const dom = document.getElementById('repairSource')
      state.myChart = echarts.init(dom!)
      pieInit()
    }

    const pieInit = () => {
      state.datas = []
      props.dataList.map((item) =>
        state.datas.push({
          value: item.repairNum,
          name: item.repairResource
        })
      )

      const setLabel = () => {
        const opts = []
        for (let i = 0; i < state.datas.length; i++) {
          const item = {
            name: '',
            value: 0,
            label: {}
          }
          item.name = state.datas[i].name
          item.value = state.datas[i].value
          item.label = {
            // 控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
            show: true,
            formatter: ['{circle|}', '{value|{b}} {per|{d}%}'].join('\n'), // 用\n换行
            rich: {
              circle: {
                height: 8,
                width: 18,
                padding: [0, -5],
                borderRadius: 10,
                borderWidth: 3,
                borderStyle: 'solid',
                borderColor: assetOverviewVuexState.customColorList.value[i % 8] // 圆点颜色和饼图块状颜色一致
              },
              value: {
                padding: [5, 5, 0, 0]
              },
              per: {
                color: assetOverviewVuexState.customFontColorList.value[i % 8],
                fontSize: 15,
                padding: [5, 5, 0, 0]
              }
            }
          }

          opts.push(item)
        }
        return opts
      }

      // 绘制图表
      state.myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        title: [
          {
            text: '报修来源统计',
            top: 'center',
            left: 'center',
            textStyle: {
              fontSize: 12,
              fontWeight: 500
            }
          }
        ],
        series: [
          {
            color: assetOverviewVuexState.customColorList.value,
            type: 'pie',
            data: setLabel(),
            radius: ['20%', '80%'],
            roseType: 'area',
            emphasis: {
              // 饼样式
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 15,
              align: 'right',
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ]
      })

      // 建议加上以下这一行代码，不加的话，当浏览器窗口缩小时，超过div界限
      window.addEventListener('resize', function () {
        state.myChart.resize()
      })
    }

    return () => (
      <div class={styles['pie-chart']}>
        <div id="repairSource" class={styles['statistics-map']}></div>
      </div>
    )
  }
})
